<template>
	<div class="kaoguanguanli" >

    <div class="flexcc" style="width: 100vw; height: 90vh;" v-if="yidenglu == 2">
      <div style="padding: 0 1rem; width: 100%; font-size: 16px;">
        <div style="font-size: 14px; color: #666; margin-bottom: 0.5rem; text-align: center;">您还未绑定手机号，请先绑定手机号！</div>
        <div class="flexc mb20">
           <el-input v-model="all.phone" style="100%" placeholder="请输入手机号"></el-input>
        </div>
        <div class="flexc mb20">
           <div style="position: relative; width: 100%;">
             <el-input v-model="all.code" style="100%" placeholder="请输入验证码"></el-input>
             <div style="position: absolute; right: 10px; top:12px; font-size: 12px; cursor: pointer; color: #999;" @click="getcode()" >
                <span v-if="daojishiname == '获取验证码'" style="color: #197cff;">{{daojishiname}}</span>
                <span v-if="daojishiname != '获取验证码'">{{daojishiname}}</span>
             </div>
           </div>
        </div>
        <div><el-button type="primary" style="width: 100%;" @click="bindtest">绑定手机号</el-button></div>
      </div>
    </div>

    <div v-if="yidenglu == 1" style="padding:2rem 0.3rem 1.1rem; background: url('https://file.storep.91haoka.cn/bj.png') no-repeat; background-size: 7.5rem 3rem; " >

      <div class="flexc" style="background: #fff; border-radius: 10px; padding: 0.3rem;">
        <div><img :src="userinfo.avatar_url || 'https://file.storep.91haoka.cn/gerenxitong/g3.png'" style="width: 1.5rem; height: 1.5rem; border-radius: 0.75rem; margin-right: 0.2rem;"></div>
        <div>
          <div style="font-size: 0.32rem; margin-bottom: 0.1rem;">{{userinfo.name}}</div>
          <div style="font-size: 0.22rem; margin-bottom: 0.1rem;">手机号：{{userinfo.phone}}</div>
        </div>
      </div>

      <div style="margin-top: 0.5rem; background: #fff; padding: 0.3rem; border-radius: 0.1rem; ">
        <div class="flexc" style="font-size: 12px; width: 100%; gap: 0.1rem; font-weight: bold; margin-bottom: 0.5rem;">
          <div style="flex: 2; ">我的赛事</div>
          <!-- <div style="flex: 1; text-align: center;">缴费状态</div> -->
          <div style="flex: 1; text-align: center; ">缴费</div>
          <div style="flex: 1; text-align: center; ">操作</div>

        </div>
        <div class="flexbc" style="font-size: 12px; margin-bottom: 0.2rem;  gap: 0.1rem; border-bottom: 1px #eaeaea solid; padding-bottom: 0.2rem;" v-for="item in list" :key="item.id" @click="$router.push('/bisai/detail?id='+item.competition_id)">
          <div style="flex: 2; overflow: hidden;" >
            <div style="margin-bottom: 20px; width: 100%;" class="shengluehao">{{item.competition_name}}</div>
            <div>组别：{{item.type_name}}</div>
          </div>
          <!-- <div style="flex: 1; text-align: center; ">{{item.pay_status_name}}</div> -->
          <div style="flex: 1; text-align: center; " >
            <div style="margin-bottom: 20px;">{{item.price}}元</div>
            <div style="color: #197cff;" v-if="item.pay_status_name == '未支付'" @click.stop="jiaofei(item)">缴费</div>
            <div v-if="item.pay_status_name != '未支付'">{{item.pay_status_name}}</div>
          </div>


          <div style="flex: 1; text-align: center; color: #197cff;" >
            <div style="margin-bottom: 10px;" @click.stop="chakan(item)">查看详情</div>
            <div style="margin-bottom: 10px;" @click.stop="tuifei(item)" v-if="item.pay_status == 10" >申请退费</div>
            <div style="margin-bottom: 10px;" @click.stop="tuiguang(item)">推广赚佣</div>
            <div style="margin-bottom: 10px;" @click.stop="zhengshu(item)">查看证书</div>
            <div style="margin-bottom: 10px;" @click.stop="yongjin(item)">查看佣金</div>
          </div>

        </div>
      </div>
    </div>
    <dibu></dibu>
    <el-dialog  center :visible.sync="log"  width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>您的手机号已经和其他的微信绑定，是否要覆盖绑定？</div>
      <div slot="footer" class="dialog-footer"  style="font-size: 16px;">
        <el-button type="danger" round @click="$router.push('/bisai')">取消</el-button>
        <el-button type="primary" round @click='bangdinggo'>覆盖</el-button>
      </div>
    </el-dialog>

    <el-dialog center :visible.sync="log2"  width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        {{yongjinall.id_name}}共计邀请{{yongjinall.spread_players_num}}人，佣金{{yongjinall.spread_income}}元
      </div>
      <div slot="footer" class="dialog-footer" style="font-size: 16px;">
        <el-button type="primary" round @click='log2 = false'>好的</el-button>
      </div>
    </el-dialog>
    <fenxiang></fenxiang>

    <div><tuiguangtu ref="tuiguangtu" v-if="relo" @shengchengwan="shengchengwan" :competition_id="tuiguangall.competition_id" :inv_user_id="tuiguangall.id"></tuiguangtu></div>

	</div>
</template>

<script>
  import tuiguangtu from '../chengji/tuiguangtu.vue'
  import fenxiang from '../fenxiang.vue'
  import dibu from '../footer.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      dibu,fenxiang,tuiguangtu
    },
		data() {
			return {
        all:{
          phone:"",
          code:""
        },
        daojishisv:"",
        daojishiname:'获取验证码',
        daojishi:60,
        yidenglu:0,
        userinfo:{ },
        openid:localStorage.getItem('openid') || '',
        log:false,
        list:[],
        log2:false,
        yongjinall:{},

        tuiguangall:{ },
        relo:false

			}
		},
    beforeDestroy() {

    },
		created() {
      //判断是否已经是登录状态
      this.auth()
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
		},
		methods: {
      yongjin:function(item){
        axios.get(this.IP_URL+'/api/competition/spreaduserdatahou',{params:{
          id:item.competition_id,
          spread_user_id:item.id
        }}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.yongjinall = response.data.data
            this.log2 = true
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      tuiguang:function(item){
        this.tuiguangall = item
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
          this.$nextTick(()=>{
            this.$refs.tuiguangtu.shengcheng()
          })
        })

        // this.$router.push('/tuiguang?competition_id='+item.competition_id+'&enrolment_id='+item.id)
      },
      shengchengwan:function(val){

        this.$router.push('/tuiguangtudan?imgurl='+encodeURIComponent(val))
      },
      zhengshu:function(item){

        vant.Toast('很抱歉，目前比赛成绩尚未公布，请您耐心等待。');
        // this.$router.push('/zhengshu?competition_id='+item.competition_id+'&enrolment_id='+item.id)
      },
      tuifei:function(item){
        this.$confirm('确定要申请退费吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(this.IP_URL+'/api/enrolment/referrefund',{
            id:item.id,
            phone:item.phone,
            name:item.name
          }).then((response)=>{
          	if (response.data.msg.code == 0) {
              vant.Toast('已申请，请等待后台审核');

              this.getbaoming()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      chakan:function(item){
        this.$router.push('/bisai/detail?id='+item.competition_id)
      },
      getfenxiao:function(){
        // axios.get(this.IP_URL+'/api/competition/spreaduserdata',{params:{
        //   spread_user_id:this.userinfo.id
        // }}).then((response)=>{
        // 	if (response.data.msg.code == 0) {

        // 	} else {
        // 		this.$message.error(response.data.msg.info);
        // 	}
        // })
      },
      auth:function(){
        axios.get(this.IP_URL+"/user/auth/info")
          .then(response2 => {
            if (response2.data.msg.code == 0) {
              //已登陆
              this.yidenglu = 1
              this.getbaoming()
              this.userinfo = response2.data.data
              this.getfenxiao()
            }else{
              this.yidenglu = 2
              //未登陆
              // js判断是否是微信环境
              var ua = window.navigator.userAgent.toLowerCase();
              if (ua.match(/MicroMessenger/i) == "micromessenger") {
                if (this.$route.query.code) {
                  axios.post(this.IP_URL+"/api/wechat/codetoken",{code:this.$route.query.code})
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        this.openid = response.data.data.openid
                        this.userinfo = response.data.data.userinfo
                        // city: ""
                        // country: ""
                        // headimgurl: "https://thirdwx.qlogo.cn/mmopen/vi_32/3QlOKWC8ADw9dAf3tgvheas8iaWFHiaFWoVFL4u0W6dBu3aJarYmuJjyptPkVxicEo8JycwYheleN09b899BjRO6w/132"
                        // language: ""
                        // nickname: "铁马冰河入梦来"
                        // openid: "oYsGD6Sbi37_YyJGmKxspVx-0UR8"
                        // privilege: []
                        // province: ""
                        // sex: 0
                        if(response.data.data.token){
                          localStorage.setItem('token',response.data.data.token)
                          this.yidenglu = true
                          this.getbaoming()
                          this.getfenxiao()
                        }
                      }
                    });
                } else {
                  window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(location.href) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
                }
              }else{
                vant.Toast('您未在微信环境内，不能进入个人中心');
                this.$router.back(-1)
              }
            }
          });
      },

      jiaofei:function(item){
        var that = this
        axios.post(this.IP_URL+'/api/wechat/repay',{
          enrolment_id:item.id,
          pay_type:1,
          openid:this.openid
        }).then((response)=>{
        	if (response.data.msg.code == 0) {
            WeixinJSBridge.invoke("getBrandWCPayRequest",
              {
                appId: response.data.data.appId,
                timeStamp: response.data.data.timeStamp,
                nonceStr: response.data.data.nonceStr,
                package: response.data.data.package,
                signType: "MD5",
                paySign: response.data.data.paySign
              },
              function(res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  vant.Toast('支付成功');
                  that.log = false
                  that.getlist()
                } else {
                  vant.Toast('未支付成功');
                  that.log = false
                  that.getlist()
                }
              }
            );
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      getbaoming:function(){
        axios.get(this.IP_URL+'/user/enrolment/list').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      bindtest:function(){
        //检查是否已经绑定过微信
        axios.post(this.IP_URL+'/api/wechat/checkuser',{phone:this.all.phone}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.is_bind == 0){
              //如果没绑定过
              this.bangdinggo()
            }else{
              //如果绑定过
              this.log = true
            }
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      bangdinggo:function(){
        let obj = {
          phone:this.all.phone,
          code:this.all.code,
          openid:this.openid,
          name:this.userinfo.nickname,
          avatar_url:this.userinfo.headimgurl
        }
        axios.post(this.IP_URL+'/user/auth/bind',obj).then((response)=>{
        	if (response.data.msg.code == 0) {
            vant.Toast('绑定手机号完成');
            localStorage.setItem('token',response.data.data.token)

            setTimeout(()=>{
              //绑定完直接登录了获取登录信息
              axios.get("/user/auth/info")
                .then(response2 => {
                  if (response2.data.msg.code == 0) {
                    //已登陆
                    this.yidenglu = true
                    this.getbaoming()
                    this.userinfo = response2.data.data
                  }
                })
            },500)


        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      getcode:function(){
        if(this.all.phone.length != 11){
          vant.Toast('请输入正确手机号');
          return
        }
        if(this.daojishiname != '获取验证码'){
          return
        }

        axios.post(this.IP_URL+'/api/sms/code?phone='+this.all.phone).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.daojishisv = setInterval(()=>{

              if(this.daojishi > 0){
                this.daojishi = this.daojishi - 1
                this.daojishiname = this.daojishi+'秒后再获取'
              }else{
                this.daojishi = 60
                clearInterval(this.daojishisv)
                this.daojishiname = '获取验证码'
              }

            },1000)
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{}
  /deep/ .el-dialog__header{ padding: 0;}
</style>
